<template>
  <div>
    <div v-if="codes != 0" class="container">
      <div class="header">
        <div class="title"><span>学员评教说明</span></div>
      </div>
      <div class="main">
        <div
          class="infinite-list"
          v-infinite-scroll="load"
          style="overflow: auto"
        >
          <el-input
            type="textarea"
            v-model="up.teaching"
            disabled="true"
          ></el-input>
        </div>
      </div>
      <div class="footer">
        <el-button
          type="primary"
          @click="toLink('/student/evaluation/supervision')"
          >开始评教
        </el-button>
      </div>
    </div>

    <h1 style="text-align:center;" v-else>{{ msg }}</h1>
  </div>
</template>
<script>
import { studentlist } from "@/api/student/student";

export default {
  data() {
    return {
      codes: 0,
      msg: "",
      up: {
        teaching: ""
      },
      studentid: "200107",
      count: 0
    };
  },
  mounted() {
    this.student();
  },
  methods: {
    //教员评教信息核对(查询)
    async student() {
      const result = await studentlist(this.studentid);
      if (result.data.code == 200) {
        this.up = result.data.data;
        this.codes = result.data.code;
      } else {
        this.codes = result.data.code;
        this.msg = result.data.data;
      }
    },

    toLink(url) {
      this.$router.push(url);
    },
    load() {
      this.count += 2;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  justify-content: space-evenly;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-around;
    margin-top: 62px;
    flex-direction: row;
    .title {
      width: 1563px;
      height: 77px;
      border: 1px solid #004ca7;
      opacity: 0.8;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        width: 120px;
        height: 26px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 14px;
        color: #004ca7;
        opacity: 1;
      }
    }
  }
  .main {
    display: flex;
    justify-content: space-around;
    margin-top: 32px;

    opacity: 1;
    border-radius: 0px;
    .infinite-list {
      width: 1563px;
      height: 656px;
      background: #ffffff;
      border: 1px solid #004ca7;
    }
  }
}
.footer {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  /deep/.el-button--primary {
    width: 131px;
    height: 36px;
    color: #fff;
    background-color: #004ca7;
    border-color: #004ca7;
  }
  /deep/ .el-button--primary:hover {
    background: #4480ca;
    border-color: #4480ca;
    color: #fff;
  }
}
</style>
